import { Point3 } from '@/types';
import { Line } from '@react-three/drei';
import { Line3, Vector3 } from 'three';
import { degToRad } from 'three/src/math/MathUtils';

export function ArrowLine(props: {
  startPoint: Point3;
  endPoint: Point3;
  color: string;
  lineWidth?: number;
}) {
  const { startPoint, endPoint, color, lineWidth = 1 } = props;
  const line3 = new Line3(new Vector3(...startPoint), new Vector3(...endPoint));
  const arrowLen = 10;
  const arrowAngle = degToRad(45);
  const arrowDirectionVector3 = new Vector3()
    .subVectors(line3.end, line3.start)
    .normalize()
    .negate();
  const axiosVector3 = new Vector3(0, 0, 1);
  const arrowPoint1Vector3 = arrowDirectionVector3
    .clone()
    .applyAxisAngle(axiosVector3, arrowAngle)
    .setLength(arrowLen);
  const arrowPoint2Vector3 = arrowDirectionVector3
    .clone()
    .applyAxisAngle(axiosVector3, -arrowAngle)
    .setLength(arrowLen);
  const arrowTopPointVector3 = new Vector3(0, 0, 0);

  return (
    <group>
      <Line
        points={[line3.start, line3.end]}
        color={color}
        lineWidth={lineWidth}
      />
      ;
      <Line
        position={line3.end}
        points={[arrowPoint1Vector3, arrowTopPointVector3, arrowPoint2Vector3]}
        color={color}
        lineWidth={lineWidth}
      />
      ;
    </group>
  );
}
